<template>
	<view>
		<!-- 主体表单 -->
		<view class="main">
			<!-- <view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view> -->
			<!-- <view class="title_des">个人找回密码</view> -->
			<view class="item">
				<image class="login_image" src="../../../static/login/userName.png"></image>
				<input class="main-input" v-model="phoneData" placeholder="请输入手机号/邮箱" />
			</view>
			<view style="margin-top: 8px"></view>
			<view class="item">
				<image class="login_image" src="../../../static/login/code.png"></image>
				<view class="type">
					<input v-model="code" class="main-input-code" maxlength="6" type="number" placeholder="请输入验证码" />
					<getCode codeText="获取验证码" setTime="60" ref="runCodes" @setCode="sendMsg()"></getCode>
				</view>
			</view>
			<view style="margin-top: 8px"></view>
			<view class="item">
				<image class="login_image" src="../../../static/login/password.png"></image>
				<view class="type"><input v-model="passData" class="main-input-code" maxlength="20" type="password" placeholder="请设置密码" /></view>
			</view>
		</view>
		<view class="btn_login" @click="startForget">立即找回</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				//logo图片 base64
				logoImage: '',
				phoneData: '', //用户/电话
				passData: '', //密码
				showAgree: true,
				email: '', //企业邮箱
				code: '' //验证码
			};
		},

		mounted() {
			_this = this;
		},
		destroyed() {
			uni.hideKeyboard();
		},
		methods: {
			isShowAgree() {
				//是否选择协议
				_this.showAgree = !_this.showAgree;
			},
			navBack() {
				uni.navigateBack();
			},
			sendMsg() {
				if (this.phoneData.length == 0) {
					this.$queue.showToast('请输入手机号或邮箱');
					return;
				}
				if (this.phoneData.length == 11 || this.phoneData.split('@') != -1) {
					this.$queue.showLoading('获取验证码中...');
					this.$Request
						.get('/system/user/getCodeRegister?sendNumber=' + this.phoneData + '&isRegister=1')
						.then(res => {
							if (res.resultCode == 1) {
								this.$queue.showToast('验证码发送成功请注意查收');
								this.$refs.runCodes.$emit('runCodes'); //触发倒计时（一般用于请求成功验证码后调用）
							} else {
								this.$queue.showToast(res.errmsg);
							}
							uni.hideLoading();
						})
						.catch(res => {
							uni.hideLoading();
						})
				} else {
					this.$queue.showToast('请输入手机号或邮箱');
					return;
				}

			},
			toForget() {
				this.$queue.showLoading('找回中...');
				this.$Request
					.postF('/system/user/findBackPassword', {
						sendNumber: this.phoneData,
						code: this.code,
						password: this.passData
					})
					.then(res => {
						if (res.resultCode == 1) {
							this.$queue.showToast('密码找回成功');
							uni.reLaunch({
								url: '/pages/my/login/login'
							});
						} else {
							this.$queue.showToast(res.errmsg);
						}
						uni.hideLoading();
					})
					.catch(res => {
						uni.hideLoading();
					});
			},
			startForget() {
				if (this.phoneData.length == 0) {
					this.$queue.showToast('请输入账号');
					return;
				}
				// if (this.phoneData.length != 11 || this.phoneData.split('@') == -1) {
				// 	this.$queue.showToast('请输入手机号或邮箱');
				// 	return;
				// }
				if (this.code.length == 0) {
					this.$queue.showToast('请输入验证码');
					return;
				}
				if (this.code.length != 6) {
					this.$queue.showToast('验证码格式不正确');
					return;
				}
				if (this.passData.length < 1) {
					this.$queue.showToast("请设置登录密码");
					return;
				}

				if (this.passData.length < 1) {
					this.$queue.showToast('请设置登录密码');
					return;
				}
				if (this.passData.length < 6) {
					this.$queue.showToast('密码必须大于6位');
					return;
				}
				this.toForget();
			}
		}
	};
</script>

<style>
	@import url('../../../static/css/icon.css');
	@import url('../../../static/css/main.css');

	.title_des {
		color: #0055b8;
		font-size: 22px;
		margin-bottom: 32px;
	}

	.login_icon_wx {
		color: #999999;
		border: none;
	}

	.type {
		display: flex;
		margin-left: 16px;
		border-bottom: 1px solid #eeeeee;
		width: 100%;
	}

	.weixinLogin {
		color: #999999;
		text-align: center;
		font-size: 12px;
		margin-top: 60px;
	}

	.footer_des {
		color: #666666;
		text-align: center;
		font-size: 14px;
		margin-top: 40px;
	}

	.getCode {
		font-size: 14px;
		margin-left: 40px;
		color: #0055b8;
	}

	.item {
		line-height: 40px;
		display: flex;
	}

	.login_image {
		margin-top: 8px;
		width: 20px;
		height: 25px;
	}

	.main-input {
		font-size: 14px;
		margin-left: 16px;
		border-bottom: 1px solid #eeeeee;
		height: 40px;
		line-height: 40px;
	}

	.main-input-code {
		width: 70%;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
	}

	.btn_login {
		color: #ffffff;
		font-size: 16px;
		width: 250px;
		height: 40px;
		background: #0055b8;
		border-radius: 8px;
		line-height: 40px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 45px;
	}

	.main-input {
		flex: 1;
		text-align: left;
		font-size: 28 upx;
		padding-right: 10 upx;
		margin-left: 20 upx;
	}
</style>
